import { IFormProps, size, formItemLayout, getUploadResult, productPage, getImages, getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, Upload, Checkbox, InputNumber, Col, Button, Table, Popconfirm } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
const Styles = require("../../styles/index.less");
export interface IItemSpecListProps extends FormComponentProps {
    item: api.SingleUserMallItemsVOItemVO,
    itemSpecs: Array<api.SingleUserMallItemsVOItemSpecVO>,
    loading: boolean,
    onSearch: (any) => void,
    onEdit: (any?) => void,
    onRemove: (any) => void,
}
class ItemSpecList extends React.PureComponent<IItemSpecListProps, any>{
    constructor(props) {
        super(props);
    }

    search = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                this.props.onSearch(form);
            }
        });
    }

    add = () => {
        this.props.onEdit();
    }

    edit = (itemSpec) => {
        this.props.onEdit(itemSpec);
    }

    remove = (id) => {
        this.props.onRemove(id);
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { item, itemSpecs, loading } = this.props;
        return (<Col span={24}>
            <Form layout="inline">
                {/* <Form.Item>
                    <Button size={size} onClick={this.add}>新增</Button>
                </Form.Item> */}
                {/* <Form.Item>
                    <Button size={size} type="primary" loading={loading} onClick={this.search}>查询</Button>
                </Form.Item> */}
            </Form>
            <Col span={24}>
                <hr className={Styles.hrBorder} />
                <h3>商品价格列表</h3>
            </Col>
            <Col span={24}>
                <Table
                    dataSource={itemSpecs}
                    bordered
                    pagination={false}
                    rowKey={(record: api.SingleUserMallItemsVOItemSpecVO) => String(record.id)}
                    loading={loading}
                >
                    <Table.Column title="序号" key="no" render={(text, record, index) => {
                        return index + 1
                    }} />
                    <Table.Column title="规格" key="spec" dataIndex="spec" />
                    <Table.Column title="图片" key="picture" render={(text, record: api.SingleUserMallItemsVOItemSpecVO, index) => {
                        return <img width='100px' src={record.picture} />
                    }} />
                    <Table.Column title="原价(元)" key="originalPrice" dataIndex="originalPrice" />
                    <Table.Column title="价格(元)" key="price" dataIndex="price" />
                    <Table.Column title="状态" key="status" render={(text, record: api.SingleUserMallItemsVOItemSpecVO, index) => {
                        return !record['enabled'] ? '失效' : '启用'
                    }} />
                    <Table.Column title="操作" render={(text, record: api.SingleUserMallItemsVOItemSpecVO, index) => {
                        return (
                            <div>
                                <a className={Styles.M_RIGHT} onClick={() => this.edit(record)}>
                                    编辑
                                </a>
                                {
                                    !record['enabled'] ? (<Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                        <a>删除</a>
                                    </Popconfirm>) : (undefined)
                                }

                            </div>
                        );
                    }} />
                </Table>
            </Col>
        </Col>)
    }
}

export default Form.create()(ItemSpecList);
